<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>附件管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true" :model="fileVo" class="demo-form-inline">
        <el-form-item label="文件名" label-width="70px">
          <el-input clearable v-model="fileVo.fileName" placeholder="请输入文件名"></el-input>
        </el-form-item>
        <el-form-item label="文件后缀" label-width="85px">
          <el-input clearable v-model="fileVo.suffix" placeholder="请输入文件后缀"></el-input>
        </el-form-item>
        <el-form-item label="文件路径" label-width="85px">
          <el-input clearable v-model="fileVo.path" placeholder="请输入文件路径"></el-input>
        </el-form-item>
        <el-row></el-row>
        <el-form-item label="日期区间" label-width="70px">
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-row></el-row>
        <el-row style="text-align: center">
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetFileVo">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="getFileList">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table
        :data="fileList"
        border
        max-height="100%"
        style="width: 100%;">
        <el-table-column
          prop="id"
          label="#"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="文件名"
          width="110">
        </el-table-column>
        <el-table-column
          prop="path"
          label="文件路径"
          width="760">
          <template #default="scop">
            <el-image
              :src="scop.row.path"
              :preview-src-list="[scop.row.path]"
              style="width: 100px; height: 100px" lazy>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="suffix"
          label="文件后缀"
          width="110">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="上传时间"
          width="200">
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30,60]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { queryListPage } from '@/api/Users'

export default {
  name: 'Attachments',
  data (){
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      time:"",
      fileVo: {
        fileName: "",
        suffix: "",
        path:"",
        startDate:"",
        endDate:""
      },
      fileList:[],
      //每页显示的条数
      size: 6,
      //总条数
      total: 100,
      //当前页码
      current: 1
    };
  },
  mounted () {
    this.getFileList()
  },
  methods:{
    //当每页条数改变的时候
    handleSizeChange (val) {
      //将val赋值到size
      this.size = val;
      //重新到后台查询
      this.getFileList();
    },
    //当前页码改变的时候
    handleCurrentChange (val) {
      this.current=val;
      this.getFileList();
    },
    dateChange(val){
      if(val[1] < val[0]){
        this.$message.error('开始日期不能大于结束日期');
        this.time = '';
      }
      this.fileVo.startDate=val[0]
      this.fileVo.endDate=val[1]
    },
    resetFileVo(){
      this.fileVo.fileName=""
      this.fileVo.suffix=""
      this.fileVo.path=""
      this.fileVo.startDate=""
      this.fileVo.endDate=""
      this.time=""
      this.getFileList()
    },
    async getFileList(){
      const {data: res} =await queryListPage(this.current,this.size,this.fileVo)
      if (res.code == 200){
          this.fileList=res.data.fileList
        this.total=res.data.total
      }else {
        return this.$message.error("文件列表查询失败:" + res.msg);
      }
    }
  }
}
</script>

<style scoped>

</style>
